<template>

	<view class="sort-Header sort-position">
		<text>分类</text>
		<text>操作</text>
	</view>
	<view style="height: 90rpx;"></view>
	<view class="sort-Header sort-table">
		<text class="occupy">膨化食品</text>
		<text class="sort-but">删除</text>
	</view>
	<page-container :show="show" @clickoverlay="show = false">
		<view class="space-view">
			<view class="modify-sub">
				<image src="/static/detail/guanbi.svg" mode="widthFix" @click="show = false"></image>
			</view>
			<view class="att-input">
				<input type="text" v-model="sort_name" placeholder="输入分类" placeholder-class="I-style"
					cursor-spacing="50" />
			</view>
			<view class="newly-added classif" @click="subMit">提交</view>
		</view>
	</page-container>
	<view class="" style="height: 300rpx;">
	</view>
	<view class="newly-added-view">
		<view class="newly-added" @tap="show = true">
			新增分类
		</view>
	</view>

</template>




<script setup>
	import {
		ref
	} from 'vue';

	const show = ref(false)

	function closeDialog() {
		console.log('关闭弹窗--');
	}

	function subMit() {
		show.value = false;
		console.log('提交--');
	}
</script>


<style scoped>
	.I-style {
		color: #cccccc;
	}

	.att-input-box {
		margin: 20px 0;
	}

	.submit-btn {
		background-color: #eb6b50;
		color: #ffffff;
		text-align: center;
		border-radius: 7rpx;

	}

	.att-input {
		background-color: #f7f7f7;
		padding: 20rpx;
		border-radius: 7rpx;
	}

	.classif {
		margin: 60rpx 0 !important;
	}

	.modify-sub {
		padding-bottom: 60rpx !important;
	}
</style>